<template>
	<view class="video">
		<view class="video-tabs">
			<u-tabs :list="list"  :is-scroll="false" :current="current" @change="change" active-color="#D1AA56"></u-tabs>
		</view>
		<view class="video-plate-1">
			<view class="item" v-for="(item,index) in videoList" :key="index" @click="onVideoPlay(item.videos_link)">
				<image :src="item.videos_pic" mode="widthFix"></image>
				<view class="btm-txt">
					<text>{{item.videos_name}}</text>
					<text>{{item.videos_name}}</text>
				</view>
			</view>
		</view>
		<video id="myVideo" :src="videoUrl" :autoplay="true" direction="0" objectFit="cover" @fullscreenchange="fullscreenchange" v-show="videoShow"></video>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list: [],
				current: 0,
				tabsId:0,
				videoList:[],
				videoUrl:'',
				videoShow:false,
				videoContext:'',
				page:1
			};
		},
		onReady: function (res) {
			this.videoContext = uni.createVideoContext('myVideo');
			// this.videoContext.requestFullScreen();
		},
		onReachBottom() {
			this.page ++
			this.getVideoList()
		},
		created() {
			this.getTabs()
			this.getVideoList()
		},
		methods:{
			// 全屏操作
			fullscreenchange(e){
				if(e.detail.fullScreen == true){//进入全屏幕
					console.log('进入全屏')
				}else{
					this.videoContext.stop()
					this.videoShow = false
				}
			},
			// 播放视频
			onVideoPlay(url){
				this.videoUrl = url
				this.videoShow = true
				this.videoContext.requestFullScreen();
			},
			// 请求视频列表
			getVideoList(){
				uni.request({
				    url:this.$Url +'/index.php/app/videos/videos_list',
				    method:'POST',
				    data:{
				       p:this.page,
					   category_id:this.tabsId
				    },
				    header:{
				        "token":uni.getStorageSync('token')
				    },
				    success: (res) => {
						if (res.data.status == 200) {
							this.videoList = this.videoList.concat(res.data.data.vidos_list)
						} else{
							uni.showToast({
								title:res.data.msg,
								icon:'none',
								duration:1200
							})
						}
				    }
				})
			},
			// 请求tabs列表
			getTabs(){
				uni.request({
				    url:this.$Url +'/index.php/app/videos/Videos_category',
				    method:'POST',
				    data:{
				       
				    },
				    header:{
				        "token":uni.getStorageSync('token')
				    },
				    success: (res) => {
						if (res.data.status == 200) {
							this.list = res.data.data
						} else{
							uni.showToast({
								title:res.data.msg,
								icon:'none',
								duration:1200
							})
						}
				    }
				})
			},
			// tabs切换
			change(index) {
				this.page = 1
				this.current = index;
				this.videoList = []
				this.tabsId = this.list[index].id
				this.getVideoList()
			}
		}
	}
</script>

<style lang="scss" scoped>
.video{
	width: 100vw;
	min-height: 100vh;
	background-color: #f7f7f7;
	.video-tabs{
		background-color: #fff;
		padding-top: 10upx;
		padding-bottom: 10upx;
		position: fixed;
		width: 100%;
	}
	
	.video-plate-1{
		display: flex;
		align-items: center;
		justify-content: space-between;
		flex-wrap: wrap;
		padding: 130upx 30upx;
		.item{
			display: flex;
			align-items: center;
			justify-content: center;
			flex-direction: column;
			margin-bottom: 20upx;
			image{
				width: 300upx;
				margin-bottom: 10upx;
			}
			.btm-txt{
				display: flex;
				align-items: center;
				justify-content: center;
				flex-direction: column;
				text:first-child{
					color: #000;
					font-size: 28upx;
					margin-bottom: 5upx;
					max-width: 300upx;
					overflow: hidden;
					-webkit-line-clamp: 1;
					text-overflow: ellipsis;
					display: -webkit-box;
					-webkit-box-orient: vertical;
				}
				text:last-child{
					font-size: 24upx;
					color: #999;
					max-width: 300upx;
					overflow: hidden;
					-webkit-line-clamp: 1;
					text-overflow: ellipsis;
					display: -webkit-box;
					-webkit-box-orient: vertical;
				}
			}
		}
	}
	.video-box{

	}
}
</style>
